<template>
	<view class="section section-detail">
		<view class="product_info_package">
			<view class="card-box">
				<view class="tab-header">
					<view class="tab-header-inner">
						推荐套餐
					</view>
				</view>
				<view class="tab-view">
					<view class="product-package-main">
						<view class="product-img">
							<image :src="dataInfo.img_url" mode=""></image>
						</view>
						<view class="product-content">
							<view class="product-name text-ellipsis">
								{{dataInfo.name}}
							</view>
							<view class="product-price">
								<view class="price">
									￥{{dataInfo.price}}
								</view>
								<view class="price origin-price del-price"
									v-if="dataInfo.price!==dataInfo.market_price">
									￥{{dataInfo.market_price}}
								</view>
							</view>
						</view>
					</view>
					<view class="add-icon-box">
						<image src="../../static/images/add.png" mode=""></image>
					</view>
					<view class="tab-inner-view">
						<block v-for="(pack,packIndex) in packageList" :key="packIndex">
							<view class="product-package-other">
								<view class="product-img" @click="toShopDetail(pack.goods_list[0])">
									<image :src="pack.goods_list[0].goods_img" mode=""></image>
								</view>
								<view class="product-content">
									<view class="product-name text-ellipsis">
										{{pack.goods_list[0].goods_name}}
									</view>
									<view class="product-price column">
										<view class="price">
											￥{{pack.act_price}}
										</view>
										<view class="price origin-price del-price">
											￥{{pack.goods_list[0].goods_price}}
										</view>
									</view>

								</view>
								<view class="product-radio">
									<template v-if="pack.isSelect">
										<image src="../../static/images/icon-check.png" mode=""
											@click="selectGood(packIndex)"></image>
									</template>
									<template v-else>
										<image src="../../static/images/select.png" mode=""
											@click="selectGood(packIndex)"></image>
									</template>
								</view>

							</view>

						</block>

						<view class="white-space-inner">

						</view>
					</view>

				</view>
				<view class="product-package-detail">
					总价
					<view class="product-price">
						<view class="price cur-price pri">
							￥{{totalMoney}}
						</view>
						<template v-if="totalGoodsNumber!==0">
							<view class="price origin-price">
								￥{{market_price}}
							</view>
							<view class="price save-price">
								节省￥{{market_price-totalMoney}}
							</view>
						</template>
					</view>
				</view>
				<template v-if="totalGoodsNumber!==0">
					<view class="product-package-btn el-flex" @click="buyPack">
						购买此套餐（{{totalGoodsNumber+1}}件商品）
					</view>
				</template>
				<template v-else>
					<view class="product-package-btn el-flex" @click="buyPack">
						立即购买
					</view>
				</template>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "product_info_package",
		props: ['dataInfo', 'packageList', 'buy_option', 'product_info'],
		data() {
			return {

			};
		},
		computed: {
			market_price() {
				let num = 0
				this.packageList.forEach(item => {
					num += Number(item.goods_list[0].goods_price)
				})
				return num + Number(this.dataInfo.market_price)
			},
			totalMoney() {
				let num = 0
				this.packageList.forEach(item => {
					if (item.isSelect) {
						num += Number(item.act_price)
					}
				})
				return num + Number(this.dataInfo.price)
			},
			totalGoodsNumber() {
				let num = 0
				this.packageList.forEach(item => {
					if (item.isSelect) {
						num += 1
					}
				})
				return num
			},
		},
		methods: {
			buyPack() {
				if (Object.keys(this.dataInfo) === 0) {
					return;
				}
				let dist = {}
				this.buy_option.map(item => {
					item.list.map(child => {
						dist[child.prop_value_id] = child.name
					})
				})
				let packArr = []
				if (this.packageList.length !== 0) {
					this.packageList.forEach(i => {
						if (i.isSelect) {
							i.is_default_select = true
							packArr.push(i)
						}
					})
				}
				let item = this.dataInfo
				const selectArr = item.prop_list.map(spec => dist[spec.prop_value_id])
				let packageList = this.packageList
				let obj = {
					goodCount: 1,
					data: {
						name: item.name,
						commodity_id: item.commodity_id,
						goods_id: item.goods_id,
						img_url: item.img_url,
						market_price: item.market_price,
						multi_service_bargins: item.multi_service_bargins,
						price: item.price,
						product_id: item.product_id,
						page_id: item.page_id,
						prop_list: item.prop_list,
						reduce_price: item.reduce_price,
						buy_option: this.buy_option,
						product_info: this.product_info.product_desc_ext,
						packageList: packArr,
						original_name: this.product_info.name,
						selectedArr: selectArr
					}
				}
				this.addCartData(obj)
			},
			addCartData(item_data) {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/addCartData',
					data: {
						item_data: item_data
					},
					method: 'POST',
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							uni.showToast({
								title: '已加入购物车',
								icon: 'success',
								success() {
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/cart_page/cart_page'
										})
									}, 500)
								}
							})
						} else if (res.data.code == 401) {
							uni.showModal({
								title: "温馨提示",
								content: '请先登录',
								confirmText: "确定",
								confirmColor: "#815EC9",
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pages/login-view/login-view'
										})
									}
								}
							});
						}
					},
					fail: function(err) {

					}
				})
			},
			toShopDetail(action) {
				if (action.goods_id) {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.goods_id}`
					})
				}
			},
			selectGood(index) {
				this.packageList[index].isSelect = !this.packageList[index].isSelect
			},
		}
	}
</script>

<style lang="scss" scoped>
	.product_info_package {
		overflow: hidden;
		padding-left: 0.32rem;

		view {
			line-height: 1.15;
		}

		.card-box {
			.tab-header {
				padding: 0.32rem 0;

				.tab-header-inner {
					font-size: .28rem;
					font-weight: 500;
					width: 100%;
					text-align: left;
					font-family: MI-LANTING--GBK1-Bold, MI-LANTING--GBK1;
					color: #000;
				}
			}

			.tab-view {
				display: flex;
				position: relative;
				width: 7.2rem;
				height: 2.96rem;
				margin: 0 0 0.1rem;
				overflow: hidden;

				.product-package-main {
					width: 1.9rem;
					height: 2.93rem;
					border-radius: 0.16rem;
					border: 0.01rem solid #e5e5e5;

					.product-img {
						width: 1.64rem;
						height: 1.64rem;
						margin: 0.12rem auto;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.product-content {
						text-align: left;
						padding: 0 0.12rem;

						.product-name {
							height: 0.24rem;
							margin-bottom: 0.16rem;
							font-size: .24rem;
							color: #000;
							line-height: .24rem;
						}

						.product-price {
							display: flex;
							flex-wrap: nowrap;
							flex-direction: column;


							.price {
								color: #000;
								font-size: .24rem;
								font-weight: 700;
								position: relative;
								line-height: 1em;
							}

							.origin-price {
								font-weight: 400;
								text-decoration: line-through;
								line-height: .18rem;
								margin-top: 0.08rem;
								font-size: .2rem;
								color: rgba(0, 0, 0, .26);
							}
						}
					}
				}

				.add-icon-box {
					position: relative;
					width: 1.08rem;
					height: 2.95rem;

					image {
						width: 0.28rem;
						height: 0.28rem;
						margin: 1.33rem 0.4rem;
					}
				}

				.tab-inner-view {
					position: relative;
					left: -0.2rem;
					display: flex;
					padding-left: 0.2rem;
					height: 2.96rem;
					overflow-x: auto;
					overflow-y: hidden;
					white-space: nowrap;

					.white-space-inner {
						width: 0.34rem;
						height: 100%;
						flex-shrink: 0;
					}

					.product-package-other {
						position: relative;
						margin-right: 0.24rem;
						flex-shrink: 0;
						width: 1.9rem;
						height: 2.93rem;
						border-radius: 0.16rem;
						border: 0.01rem solid #e5e5e5;

						.product-img {
							width: 1.64rem;
							height: 1.64rem;
							margin: 0.12rem auto;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.product-radio {
							position: absolute;
							right: 0;
							bottom: 0;
							align-self: center;
							overflow: hidden;

							image {
								display: block;
								width: 0.48rem;
								height: 0.48rem;
							}
						}

						.product-content {
							text-align: left;
							padding: 0 0.12rem;



							.product-name {
								height: 0.24rem;
								margin-bottom: 0.16rem;
								font-size: .24rem;
								color: #000;
								line-height: .24rem;
							}

							.product-price {
								display: flex;
								flex-wrap: nowrap;
								flex-direction: column;

								.price {
									color: #000;
									font-size: .24rem;
									font-weight: 700;
									position: relative;
									line-height: 1em;
								}

								.origin-price {
									font-weight: 400;
									text-decoration: line-through;
									line-height: .18rem;
									margin-top: 0.08rem;
									font-size: .2rem;
									color: rgba(0, 0, 0, .26);
								}
							}


						}


					}
				}

			}
		}

		.product-package-detail {
			display: flex;
			height: 0.4rem;
			line-height: .35rem;
			font-size: .27rem;
			color: #000;
			line-height: .4rem;
			justify-content: center;
			margin: 0.28rem 0 0.33rem;

			.product-price {
				display: flex;
				flex-wrap: nowrap;

				.price {
					color: #000;
					font-size: .24rem;
					font-weight: 700;
					padding-left: 0.55em;
				}

				.pri {
					padding-left: 0.25em;
				}

				.cur-price {
					color: #ff5934;
					font-size: .32rem;
					line-height: .4rem;
				}

				.origin-price {
					margin-top: 0;
					line-height: .4rem;
					font-weight: 400;
					text-decoration: line-through;
					font-size: .2rem;
					color: rgba(0, 0, 0, .26);
					padding-left: 0.55em;
					margin-left: 0.08rem;
				}

				.total-save {
					margin: 0 0 0 0.11rem;
					color: rgba(0, 0, 0, .26);
					line-height: .4rem;
					font-size: .2rem;
				}

				.save-price {
					font-size: .2rem;
					color: rgba(0, 0, 0, .26);
					line-height: .4rem;
					font-weight: 400;
					padding-left: 0.55em;
				}
			}
		}

		.product-package-btn {
			height: 0.66rem;
			font-size: .24rem;
			color: #fff;
			background: url(../../static/images/icon-buy-tc.png) no-repeat;
			background-size: contain;
			justify-content: center;
			font-weight: 700;
			text-align: center;
		}


	}
</style>